.callout {
  --c-heading-highlight: var(--ink-accent-inverse);
  max-width: 80rem;
  margin-inline: auto;
  padding: var(--space-10) var(--space-6);
  background: var(--action-primary);
  color: var(--ink-inverse);
  border-radius: var(--radius-hero);
  text-align: center;
}
.callout-title {
  margin-bottom: var(--space-6);
  font: var(--text-4xl)/var(--leading-tight) var(--font-heading);
}
.callout-text {
  margin-bottom: var(--space-10);
  font-size: var(--text-xl);
}
@media (min-width: 48rem) {
  .callout {
    padding: var(--space-12);
  }
  .callout-title {
    font-size: var(--text-5xl);
  }
}